//缩小定义构造函数的作用域 IIFE，自调用，匿名函数
(function(){
  //全局变量
  var ps = "absolute";
  //创建食物的构造函数
  function Food(option){
    option = option instanceof Object ? option : {};
    //传入的数据可能是类似于数组等对象，进一步判断
    this.width = option.width || 20;
    this.height = option.height || 20;
    this.x = option.x || 20;
    this.y = option.y || 20; 
    this.backgroundColor = option.backgroundColor || "green";
    //增加一个属性，存储将来渲染出来的所有元素
    this.elements = [];
  }

  //渲染函数
  Food.prototype.render = function(map){
    //每次设置样式之前，随机获取一个x和y的值 
    this.x = tools.getRandom(0, map.clientWidth / this.width - 1) * this.width;
    this.y = tools.getRandom(0, map.clientHeight / this.height - 1) * this.height;  
    //创建一个新的div元素
    var ele = document.createElement("div");
    ele.style.width = this.width + 'px'; 
    ele.style.height = this.height + 'px';
    ele.style.top = this.y + 'px';
    ele.style.left = this.x + 'px';
    ele.style.backgroundColor = this.backgroundColor;
    ele.style.position = ps;
    //添加到指定的父级
    map.appendChild(ele);
    //存储render的元素，记录
    this.elements.push(ele);
  }

  //删除食物元素
  Food.prototype.remove = function(map, i){
    //获取要被删除的食物的下标
    
    //将元素从html结构中删除
    map.removeChild(this.elements[i]); 
    //在数组中删除
    this.elements.splice(i,1);
  }

  //利用window对象暴露food函数给外部使用
  window.Food = Food;
})();

// //ceshi
// var map = document.getElementById("map");
// var food = new Food(map);
// food.render(map);
// food.render(map);
// food.render(map);
// setTimeout(()=>{
//   food.remove(map,2)
// },1000)

